<template>
  <div class="book-card">
    <div class="book-image">
      <ElImage :src="coverImageUrl || 'http://bookcover.yuewen.com/qdbimg/349573/1036370336/600.webp'" :alt="title" />
    </div>
    <div class="book-info">
      <h3>{{ title }}</h3>
      <div class="author">作者: {{ author }} | 更新时间: {{ formattedLastUpdateDate }}</div>
      <p class="latest-chapter">最新章节: 第{{ latestChapter }}章 {{latestChapterName}}</p>
      
      <!-- 使用 v-for 渲染 tags，居中显示 -->
      <div class="tags">
        <el-tag
          v-for="(tag, index) in tags"
          :key="index"
          type="info"
          effect="dark"
          class="tag-item"
        >
          {{ tag }}
        </el-tag>
      </div>
      
      <p class="summary">{{ summary }}</p>

      <!-- stats 居中对齐 -->
      <div class="stats">
        <span>{{ formatNumber(wordCount) }} 字</span>
        <span>{{ formatNumber(totalRecommendations) }} 总推荐</span>
        <span>{{ formatNumber(weeklyRecommendations) }} 周推荐</span>
      </div>

      <div class="actions">
        <button class="btn free-read" @click="LinkToChapter()">免费试读</button>
        <button class="btn add-bookshelf" >加入书架</button>
        <button class="btn vote" @click="VoteBook()">互动投票</button>
        <button class="btn read-on-app">手机扫码读本书</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed,ref } from 'vue';
import { formatNumber } from '@/utils/util';
import router from '@/router';
import { useRoute } from 'vue-router';
import axios from 'axios';
import { ElImage, ElMessage } from 'element-plus';
import { parse } from 'path';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
const user = userStore.userInfo;
const route = useRoute();
const path_id = computed(() => route.params.id);

// Props 定义
interface BookProps {
  id: number;
  title: string;
  coverImageUrl: string;
  author: string;
  lastUpdateDate: string;
  latestChapter: number;
  latestChapterName: string;
  tags: string[]; // tags 改为数组
  summary: string;
  wordCount: number;
  totalRecommendations: number;
  weeklyRecommendations: number;
}

// 接收 props
const props = defineProps<BookProps>();

// 格式化日期
const formattedLastUpdateDate = computed(() => {
  return new Date(props.lastUpdateDate).toLocaleString();
});

// 跳转到章节
const LinkToChapter = () => {
  const firstChapterid = ref(-1)
  axios.get('/api/chapters/getFirstChapterIdByBookId/' + path_id.value).then(response => {
          console.log(response);
          
    if (response.data.code === 80001 ) {
      console.log("没有章节,可以前往创作者中心添加哦");
      ElMessage ({ message: "没有章节,可以前往创作者中心添加哦", type: 'error' });
      return;
    }
    if (response.data.code !== 200) {
      console.log("获取章节失败");
      ElMessage ({ message: '获取章节失败', type: 'error' });
      
      
      return;
    }
    firstChapterid.value = response.data.data.id;
    console.log("点击了");
    ElMessage ({ message: '获取成功', type: 'success' });
    return router.push({ path: '/chapter_read/' +firstChapterid.value });
  });

};
const VoteBook = () => {
axios.post(`/api/votes/book?userId=${user.id}&bookId=${path_id.value}`).then(response => {
  console.log(response);
  
  if (response.data.code !== 200) {

    ElMessage ({ message: response.data.msg, type: 'error' });
    
    
    return;
  }
  ElMessage ({ message: response.data.data, type: 'success' });

})
};
</script>

<style scoped>
.book-card {
  display: flex;
  background-color:  var(--bReadContentBgColor);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 20px;
  padding: 20px;
  width: 800px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.book-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.book-image {
  flex-shrink: 0;
}

.book-image  {
  max-width: 180px;
  border-radius: 5px;
  object-fit: cover;
}

.book-info {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.book-info h3 {
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: bold;
}

.author, .latest-chapter {
  font-size: 14px;
  margin-bottom: 5px;
}

.tags {
  margin-top: 10px;
  display: flex;
  justify-content: center; /* 居中 */
  flex-wrap: wrap;
  gap: 10px;
}

.tag-item {
  margin-bottom: 5px;
  font-size: 12px;
}

.summary {
  margin: 15px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

/* stats 居中对齐 */
.stats {
  display: flex;
  justify-content: center; /* 居中 */
  gap: 20px;
  font-size: 14px;
  color: #333;
}

.actions {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

.btn {
  background-color: #007bff;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #0056b3;
}

.btn.free-read {
  background-color: #28a745;
}

.btn.add-bookshelf {
  background-color: #ffc107;
}

.btn.vote {
  background-color: #17a2b8;
}

.btn.read-on-app {
  background-color: #dc3545;
}

.btn.free-read:hover {
  background-color: #218838;
}

.btn.add-bookshelf:hover {
  background-color: #e0a800;
}

.btn.vote:hover {
  background-color: #138496;

}

.btn.read-on-app:hover {
  background-color: #c82333;
}
</style>
